<%@ page import="com.cgah.Listing" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'listing.label', default: 'Listing')}" />
        <title><g:message code="default.list.label" args="[entityName]" /></title>
    </head>
    <body>
    <script>
        // M-11: A user can click on a listing to see additional details about that listing
        function showDetails(linkId) {
            // fng ff doesn't understand click() on a href
            // document.getElementById(linkId).click();
            this.location.href = document.getElementById(linkId).href ;
            return false;
        }
    </script>
        <div class="nav"><span class="spacer"></span>
            %{--<span class="menuButton"><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></span>--}%
            <span class="menuButton"><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></span>
        </div>
        <div class="body">
            <h1><g:message code="default.my.listing.label" default="My Listings" ></g:message></h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            %{--M-5: The name is visible for each listing--}%
            %{--M-6: The number of bids is visible for each listing--}%
            %{--M-7: The starting price is visible for each listing--}%
            %{--M-8: The end date/time is visible for each listing--}%
            %{--M-9: Listings can be sorted by starting price--}%
            %{--M-10: Listings can be sorted by end date/time--}%
            <div class="list">
                <table>
                    <thead>
                        <tr>
                            <g:sortableColumn property="id" title="${message(code: 'listing.id.label', default: 'Id')}" />
                            <g:sortableColumn property="name" title="${message(code: 'listing.name.label', default: 'Name')}" />
                            <g:sortableColumn property="createdDateTime" title="${message(code: 'listing.createdDateTime.label', default: 'Created Date Time')}" />
                            <g:sortableColumn property="endDateTime" title="${message(code: 'listing.endDateTime.label', default: 'End Date Time')}" />
                            <g:sortableColumn property="startingBidPrice" title="${message(code: 'listing.startingBidPrice.label', default: 'Starting Bid Price')}" />
                            <g:sortableColumn property="description" title="${message(code: 'listing.description.label', default: 'Description')}" />
                            <th><g:message code="listing.seller.label" default="Seller" /></th>
                            <th><g:message code="listing.totalBids.label" default="# of Bids"/></th>
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${listingInstanceList}" status="i" var="listingInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}" onclick="showDetails('detailLink_'+${listingInstance.id})">
                            <td><g:link action="show" id="${listingInstance.id}" elementId="detailLink_${listingInstance.id}">
                                ${fieldValue(bean: listingInstance, field: "id")}
                                </g:link>
                            </td>
                            <td>${fieldValue(bean: listingInstance, field: "name")}</td>
                            <td><g:formatDate date="${listingInstance.createdDateTime}" /></td>
                            <td><g:formatDate date="${listingInstance.endDateTime}" /></td>
                            <td>${fieldValue(bean: listingInstance, field: "startingBidPrice")}</td>
                            <td style="max-width:50px; white-space:normal;">${fieldValue(bean: listingInstance, field: "description")}</td>
                            <td>${fieldValue(bean: listingInstance, field: "seller")}</td>
                            <td>${listingInstance.bids.size()}</td>
                        </tr>
                    </g:each>
                    </tbody>
                </table>
            </div>

            %{-- M-3: If more than 5 listings exist, pagination links will be available to let the user page through the listings--}%
%{--
            <div class="paginateButtons">
                <g:paginate max="10"
                        action="list" controller="listing"
                        total="${Listing.count()}"  />
            </div>
--}%
        </div>
    </body>
</html>
